<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .carousel {
        margin: 0 auto;
        width: 600px;
        height: 300px;
        position: relative;
        border: 5px solid rgba(red, green, blue, alpha);
    }
    .img {
        width: 600px;
        height: 300px;
        position: absolute;
    }
    .carousel .btn {
        /* 添加position可以对a标签设置宽高 */
        position: absolute; 
        width: 40px;
        height: 40px;
        top: 50%;
        margin-top: -20px; 
        border: 1px solid #000;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        background-color: rgba(255, 255, 255, .5);
        cursor: pointer;
        font-size: 26px;
        color: #fff;
    }
    .carousel .btn:hover {
        background-color: antiquewhite;
        color: white;
    }
    .carousel .leftbtn {
        left: 3%;  
    }
    .carousel .rightbtn {
        right: 3%;
    }
    .carousel ol {
        position: absolute;
        width: 200px;
        height: 20px;
        right: 20px;
        bottom: 20px;
        list-style: none;
    }
    .carousel ol li {
        float: left;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, .5);
        border-radius: 50%;
        margin-right: 10px;
    }
    .carousel ol .current {
        background-color: yellow;
    }
</style>
<body>
    <div class="carousel">
        <img src="D:\python1\前端工程师\project\vue-element-plus-admin\src\assets\img\login-bg.jpg" alt="" class="img">
        <a class="leftbtn btn">&lt;</a>
        <a class="rightbtn btn">&gt;</a>
        <ol>
            <li></li>
            <li></li>
            <li class="current"></li>
            <li></li>
        </ol>
    </div>
</body>
</html>